<template>
  <div>
    <van-tabs
      v-model="active"
      color="#fff"
      aria-selected="#fff"
      line-width='33.3%'
      background="transparent"
      title-active-color='#fff'
      title-inactive-color="#ccc"
    >
      <van-tab :title="`用户 ${userTotal}`">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(0)"
        >
          <van-cell
            class="chatList-item"
            v-for="user in users"
            :key="user.userid"
            @click=" $router.push({name: 'user',params: {userid: user.userid }})"
          >
            <van-image
              slot="icon"
              round
              width="55"
              height="55"
              style="margin-right: 10px;"
              :src="user.baseUrl+user.photo"
            />
            <span
              style="color: #e8e7ec;font-size:18px"
              slot="title"
            >{{ user.name }}</span>

            <div
              slot="right-icon"
              class="like-container"
            >
            </div>
          </van-cell>
        </van-list>

      </van-tab>
      <van-tab :title="`视频 ${videoTotal}`">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad(1)"
        >
          <div class="videoWrap">
            <div
              class="videoPreview"
              v-for="(video,index) in myvideos"
              :key="video._id"
              @click="$router.push({
                name:'userVideo',
                params:{
                  videoTpye:3,
                  videoid:video._id,
                   index:index,
                   q:q
                }
              })"
            >
              <div class="loveNum">
                <van-icon
                  name="like-o"
                  size="18px"
                /> {{video.likeNum}}
              </div>
              <img :src="video.baseUrl+video.poster">
              <div id="output"></div>
            </div>
          </div>
        </van-list>
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
import { getUserSearch, getVideoSearch } from '@/api/search'
export default {
  name: 'ArticleList',
  components: {},
  props: {
    q: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      users: [],
      myvideos: [],
      list: [],
      loading: false,
      finished: true,
      loading2: false,
      finished2: true,
      userPage: 0, // 页码
      videoPage: 0, // 页码
      active: 1,
      userTotal: 0,
      videoTotal: 0
    }
  },
  watch: {},
  created () {
    this.loadUser()
  },
  methods: {
    async loadUser () {
      const res = await getUserSearch(this.q, ++this.userPage)
      const user = res.data.data
      this.users = user
      this.userTotal = res.data.meta.msg
      const res2 = await getVideoSearch(this.q, ++this.videoPage)
      const myvideos = res2.data.data
      this.videoTotal = res2.data.meta.msg
      this.myvideos.push(...myvideos)
      let likeCount = 0
      myvideos.forEach(v => {
        likeCount = v.likeNum + likeCount
      })
      this.finished = false
      this.finished2 = false
      this.like_count = likeCount
      this.$toast(`现在展示的是搜索${this.q}的结果`)
    },
    async getUserSearch () {
      const res2 = await getUserSearch(this.q, ++this.userPage)
      const users = res2.data.data
      this.loading = false
      if (users.length === 0) {
        this.finished = true
      } else {
        this.users.push(...users)
      }
    },
    async getVideoSearch () {
      const res2 = await getVideoSearch(this.q, ++this.videoPage)
      const myvideos = res2.data.data
      this.loading2 = false
      if (myvideos.length === 0) {
        this.finished2 = true
      } else {
        this.myvideos.push(...myvideos)
      }
    },
    onLoad (value) {
      if (value) {
        this.getVideoSearch()
      } else {
        this.getUserSearch()
      }
    }
  }
}

</script>

<style scoped  lang="less">
.videoWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .videoPreview {
    width: 33.3%;
    height: 150px;
    position: relative;
    .loveNum {
      font-size: 18px;
      position: absolute;
      z-index: 9999;
      bottom: 3px;
      right: 3px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
/deep/.van-list__finished-text,
/deep/.van-cell {
  color: #fff !important;
  background-color: transparent !important;
}
</style>
